<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Type" content="text/html" charset="UTF-8">
    <title>学生管理系统</title>
    <link rel="stylesheet" type="text/css" href="../css/bootstrap/css/bootstrap.min.css">
    <style>
        td {
            vertical-align: middle !important;
        }
    </style>
    <script src="../js/jquery.js"></script>
    <script src="../js/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container-fluid">
    <div class="row">
        <div class="col">
            <h1 class="text-center">学生管理系统</h1>
        </div>
    </div>
    <div class="row">
        <div class="col">
            <form class="form-inline">
                <div class="col">
                    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#addBox">新增</button>
                </div>

                <div class="form-group">
                    <label for="userName">用户名:</label>
                    <input type="text" id="userName" class="form-control mx-sm-3">
                </div>
                <div class="form-group">
                    <label for="userName">所属班级:</label>
                    <select id="inputState" class="form-control mx-sm-3">
                        <option selected value="-1">全部</option>
                        <!--                        <option value="1">高职软件_2002</option>-->
                        <!--                        <option value="2">高职数媒_2002</option>-->
                        <!--                        <option value="3">中专软件_2102</option>-->
                    </select>
                </div>
                <div class="form-group">
                    <div class="col">
                        <button class="btn btn-primary" type="submit">搜索</button>
                    </div>
                </div>
            </form>

        </div>
    </div>
    <div class="row">
        <div class="col">
            <table class="table table-hover text-center">
                <thead>
                <tr>
                    <th scope="col">编号</th>
                    <th scope="col">姓名</th>
                    <th scope="col">头像</th>
                    <th scope="col">所属班级</th>
                    <th scope="col">性别</th>
                    <th scope="col">手机号</th>
                    <th scope="col">年龄</th>
                    <th scope="col">家庭住址</th>
                    <th scope="col">状态</th>
                    <th scope="col">操作</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td>1</td>
                    <td>张三</td>
                    <td>
                        <img src="../images/image01.webp" width="100px" height="60px" class="rounded mx-auto d-block"
                             alt="...">
                    </td>
                    <td>高职软件2002</td>
                    <td>男</td>
                    <td>15536587452</td>
                    <td>18</td>
                    <td>盐城</td>
                    <td>启用</td>
                    <td>
                        <button type="button" class="btn btn-info btn-sm">详情</button>
                        <button type="button" class="btn btn-danger btn-sm">删除</button>
                    </td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>张三</td>
                    <td>
                        <img src="../images/image01.webp" width="100px" height="60px" class="rounded mx-auto d-block"
                             alt="...">
                    </td>
                    <td>高职软件2002</td>
                    <td>男</td>
                    <td>15536587452</td>
                    <td>18</td>
                    <td>盐城</td>
                    <td>启用</td>
                    <td>
                        <button type="button" class="btn btn-info btn-sm">详情</button>
                        <button type="button" class="btn btn-danger btn-sm">删除</button>
                    </td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>张三</td>
                    <td>
                        <img src="../images/image01.webp" width="100px" height="60px" class="rounded mx-auto d-block"
                             alt="...">
                    </td>
                    <td>高职软件2002</td>
                    <td>男</td>
                    <td>15536587452</td>
                    <td>18</td>
                    <td>盐城</td>
                    <td>启用</td>
                    <td>
                        <button type="button" class="btn btn-info btn-sm">详情</button>
                        <button type="button" class="btn btn-danger btn-sm">删除</button>
                    </td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>张三</td>
                    <td>
                        <img src="../images/image01.webp" width="100px" height="60px" class="rounded mx-auto d-block"
                             alt="...">
                    </td>
                    <td>高职软件2002</td>
                    <td>男</td>
                    <td>15536587452</td>
                    <td>18</td>
                    <td>盐城</td>
                    <td>启用</td>
                    <td>
                        <button type="button" class="btn btn-info btn-sm">详情</button>
                        <button type="button" class="btn btn-danger btn-sm">删除</button>
                    </td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>张三</td>
                    <td>
                        <img src="../images/image01.webp" width="100px" height="60px" class="rounded mx-auto d-block"
                             alt="...">
                    </td>
                    <td>高职软件2002</td>
                    <td>男</td>
                    <td>15536587452</td>
                    <td>18</td>
                    <td>盐城</td>
                    <td>启用</td>
                    <td>
                        <button type="button" class="btn btn-info btn-sm">详情</button>
                        <button type="button" class="btn btn-danger btn-sm">删除</button>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
    <div class="row">
        <div class="col">
            <nav aria-label="Page navigation example">
                <ul class="pagination justify-content-end">
                    <li class="page-item disabled">
                        <a class="page-link" href="stuList.html">首页</a>
                    </li>
                    <li class="page-item"><a class="page-link" href="#">1</a></li>
                    <li class="page-item"><a class="page-link" href="#">2</a></li>
                    <li class="page-item"><a class="page-link" href="#">3</a></li>
                    <li class="page-item">
                        <a class="page-link" href="#">下一页</a>
                    </li>
                </ul>
            </nav>
        </div>
    </div>
    <div class="row">
        <div class="col">
            <!-- Modal -->
            <div class="modal fade" id="addBox" data-backdrop="static" data-keyboard="false" tabindex="-1"
                 aria-labelledby="staticBackdropLabel" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="staticBackdropLabel">Modal title</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body">
                            ...
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                            <button type="button" class="btn btn-primary">Understood</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>
<script>
    //页面加载
    //1.获取全部班级列表
    let classUrl = '/stu_sys/class.action'
    let data = {opr: 'list'}
    $.ajax({
        "url": classUrl,
        'type': 'get',
        'data': data,
        'dataType': 'json',
        'success': classList,
        'error': function () {
            alert("查询失败！请联系管理员")
        }
    })

    //回调成功，加载数据
    function classList(data) {
        console.log(data);
        data.forEach(dd => {
            $('#inputState').append(`<option value="` + dd.id + `">` + dd.className + `</option>`);
        })
    }

    // 2.分页展示数据
    let stuUrl = '/stu_sys/stu.action';
    let opr = 'list';
    let stuName = $('#userName').val();
    let classId = $('#inputState').val();
    let pageNum = 1;
    let stuData = {opr, stuName, classId,pageNum};
    $.ajax({
        'url': stuUrl,
        'type': 'post',
        'data': stuData,
        'dataType': 'json',
        'success': stuPageList,
        'error': function () {
            alert("加载失败！")
        }
    })

    function stuPageList(data) {
        console.log(data);
    }
</script>